<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Array的变化检测</title>
</head>
<body>
    <div>
        这里我们处理Array的变化检测功能
    </div>
</body>
</html>

<script>
    // Array的变化检测是通过将这几个常用的数组方法 push pop unshift shift splice sort reverse 封装到拦截器当中
    const arrayProto = Array.prototype
    arrayMethods = Object.create(arrayProto)

    ;[   
        'push', 
        'pop', 
        'shift', 
        'unshift', 
        'splice', 
        'sort', 
        'reverse'
    ]
    .forEach((method) => {
        // 缓存原始方法
        const original = arrayProto[method]
        Object.defineProperty(arrayMethods, method, {
            value: function(...args) {
                // 可以在这里发送变化通知
                console.log('this的指向:', this);
                return original.apply(this,args)
            },
            enumerable: false,
            writable: true,
            configurable: true
        })
    })


    class Observer {
        constructor(value) {
            this.value = value
            if(Array.isArray(value)) {
                value.__proto__ = arrayMethods // 新增
            } else {
                // 这里是去处理 Object数据动态检测
                this.walk(value)
            }
        }

        walk(){
            
        }
    }

    this.testArray = ['1','2']
    new Observer(this.testArray)
    this.testArray.push('3')
</script>